<template>
    <div>
        <div class="content">
            <el-row :gutter="10">
                <el-col :span="6">
                    <div class="bg courseBlue">
                        <div class="font">
                            <div>课程总数</div>
                            <div>{{entCount}}</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="bg ent">
                        <div class="font">
                            <div>企业总数</div>
                            <div>{{entCount}}</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="bg univ">
                        <div class="font">
                            <div>学校总数</div>
                            <div>{{univCount}}</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="bg user">
                        <div class="font">
                            <div>用户总数</div>
                            <div>{{usersCount}}</div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { courses, ents, univs, users } from '#/Home/Home'
export default {
    name: 'TotalCount',
    data() {
        return {
            coursesCount: 0,
            entCount: 0,
            univCount: 0,
            usersCount: 0
        }
    },
    created() {
        this.getCount();
    },
    methods: {
        async getCount() {
            await courses().then(res => {
                if(res.data.ret === 0) {
                    this.coursesCount = res.data.data;
                } else {
                    return this.$message.error('获取课程数量出错');
                }
            })
            await ents().then(res => {
                if(res.data.ret === 0) {
                    this.entCount = res.data.data;
                } else {
                    return this.$message.error('获取企业数量出错');
                }
            })
            await univs().then(res => {
                if(res.data.ret === 0) {
                    this.univCount = res.data.data;
                } else {
                    return this.$message.error('获取学校数量出错');
                }
            })
            await users().then(res => {
                if(res.data.ret === 0) {
                    this.usersCount = res.data.data;
                } else {
                    return this.$message.error('获取用户数量出错');
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.content {
    margin-bottom: 20px;
    .bg {
        width: 100%;
        height: 112px;
        display: flex;
        justify-content: space-between;
    }
    .courseBlue {
        background: url('../../assets/images/courseBlue.png') no-repeat;
        background-size:100% 100%;
    }
    .ent {
        background: url('../../assets/images/ent.png') no-repeat;
        background-size:100% 100%;
    }
    .univ {
        background: url('../../assets/images/univ.png') no-repeat;
        background-size:100% 100%;
    }
    .user {
        background: url('../../assets/images/user.png') no-repeat;
        background-size:100% 100%;
    }
    .font {
        color: white;
        font-size: 22px;
        padding-left: 30px;
        padding-top: 40px;
    }
}
</style>